<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>学生个人中心</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style type="text/css">
        table.table1 {
            font-family: verdana,arial,sans-serif;
            font-size:11px;
            color:#333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }
        table.table1 th {
            font-size: 14px;
            text-align: left;
            width: 200px;
            border-width: 1px;
            padding: 8px;
            height: 25px;
        }
        table.table1 td {
            font-size: 14px;
            text-align: left;
            width: 150px;
            border-width: 1px;
            padding: 8px;
        }
        .table2{
            width: 90%; font-size: 16px;text-align: center;margin: 0 auto;
            border-collapse: separate;border-spacing: 0;border: 2px #e0e0e0;
            margin-top: 20px;
        }
        .tr1{
            background: #efefef;font-size: 14px;height:50px;
        }
        .tr1{
            background: #efefef;font-size: 14px;height:50px;
        }
        .tr2{
            height: 60px;border-bottom: 2px solid #eaeaea;font-size: 13px;
        }
        button{
            margin-left: 1225px;
            width: 58px;
            height: 30px;
            border-radius: 5px;
            color: white;
            background-color: #1e9fff;
        }
        fieldset{
            width: 1227px;
            margin-left: 30px;

        }
        input{
            background-color: white;
            border-bottom: 1px solid #2e6da4;
            border-top: 0px;
            font-weight: 100;
            border-left: 0px;
            border-right: 0px;
            text-align: center;
            width: 150px;
        }
        .addressInput1{
                    background-color: white;
                    border-bottom: 1px solid #2e6da4;
                    border-top: 0px;
                    font-weight: 100;
                    border-left: 0px;
                    border-right: 0px;
                    text-align: center;
                    width: 300px;
                }
        .addressInput{
            background-color: white;
            border-bottom: 1px solid #2e6da4;
            border-top: 0px;
            font-weight: 100;
            border-left: 0px;
            border-right: 0px;
            text-align: center;
            width: 300px;
        }
        .savebutton{
            margin-left: 1190px;
            width: 95px;height: 45px;border-radius: 5px;color: white;background-color: #4169E1;
        }
        input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; }
        input[type="number"]{ -moz-appearance: textfield; }
        select{
            width: 150px;
            border: 1px solid #4169E1;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- header -->
    <div th:replace="~{commons/header::header}"></div>
    <!-- left -->
    <div th:replace="~{commons/studentLeft::left}"></div>
    <!-- 内容主体区域 -->
    <div class="layui-body">
        <div style="padding:20px 0px 45px 0px;">


                <h1 style="text-align: center">学生信息修改</h1>
                <form action="/student_update" method="get"  onsubmit="return validateForm();" name="myForm" autocomplete="off">
                    <input type="submit" value="保存" class="savebutton"  >
                    <fieldset>
                        <legend><h2>一、基本信息</h2></legend>
                        <table class="table1">
                            <tr th:each="studentList:${studentinfo2}">
                                <td rowspan="7" style="width: 200px;">  <img src="image/photo.jpg" style="width: 102px;height: 135px;"></td>
                                <th >姓名:</th>
                                <td th:text="${studentList.getStuName()}"> </td>
                                <th>曾用名:</th>
                                <td th:text="${studentList.getStuPastName()}"> </td>
                                <th>学号:</th>
                                <td th:text="${studentList.getStuId()}"> </td>
                                <th>性别:</th>
                                <td th:text="${studentList.getStuSex()}"> </td>
                            </tr>
                            <tr th:each="studentList:${studentinfo2}">
                                <th>婚姻:</th>
                                <td >
                                <select name="stuMarriage">
                                    <option th:selected="${studentList.getStuMarriage()}=='已婚'" value="已婚">已婚</option>
                                    <option th:selected="${studentList.getStuMarriage()}=='未婚'" value="未婚">未婚</option>
                                </select>
                                </td>
                                <th>辅导员</th>
                                <td th:text="${studentList.getStuInstructor()}"> </td>
                                <th>政治面貌:</th>
                                <td th:text="${studentList.getStuPoliticalOutlook()}"> </td>
                                <th>出生日期:</th>
                                <td th:text="${studentList.getStuBirth()}"> </td>
                            </tr>
                            <tr th:each="studentList:${studentinfo2}">
                                <th>国籍:</th>
                                <td th:text="${studentList.getStuCountry()}"> </td>
                                <th>籍贯:</th>
                                <td th:text="${studentList.getStuProvince()}"> </td>
                                <th>民族:</th>
                                <td th:text="${studentList.getStuNation()}"> </td>
                                <th>身份证号:</th>
                                <td th:text="${studentList.getStuIdCard()}"> </td>
                            </tr>
                            <tr th:each="studentList:${studentinfo2}">
                                <th>宿舍</th>

                                <td th:text="${studentList.getStuDormitory()}"></td>

                                <th>银行卡号:</th>
                                <td ><input type="number" name="stuBankId" th:value="${studentList.getStuBankId()}"> </td>

                                <th>所属银行:</th>
                                <td ><select name="stuBankName">
                                    <option th:selected="${studentList.getStuBankName()}=='中国工商银行'" value="中国工商银行">中国工商银行</option>
                                    <option th:selected="${studentList.getStuBankName()}=='中国建设银行'" value="中国建设银行">中国建设银行</option>
                                    <option th:selected="${studentList.getStuBankName()}=='交通银行'" value="交通银行">交通银行</option>
                                </select>
                                    </td>
                                <th>开户行</th>
                                <td >

                                    <select name="stuBankAddress">

                                        <option  th:selected="${studentList.getStuBankAddress()}=='福州闽都支行'" value="福州闽都支行">福州闽都支行</option>
                                        <option  th:selected="${studentList.getStuBankAddress()}=='福建自贸试验区福州片区分行'" value="福建自贸试验区福州片区分行">中国建设银行</option>
                                        <option  th:selected="${studentList.getStuBankAddress()}=='福州奥体支行'" value="福州奥体支行">福州奥体支行</option>
                                    </select></td>

                            </tr>
                            <tr th:each="studentList:${studentinfo2}">
                                <th>邮编:</th>
                                <td > <input type="number" name="stuPostalCode" th:value="${studentList.getStuPostalCode()}"></td>
                                <th>qq:</th>
                                <td ><input type="number" name="stuQq" th:value="${studentList.getStuQq()}"></td>
                                <th>微信:</th>
                                <td ><input type="text" name="stuWechat" th:value="${studentList.getStuWechat()}"></td>
                                <th>邮箱:</th>
                                <td ><input type="email" name="stuEmail" th:value="${studentList.getStuEmail()}"></td>
                            </tr >
                            <tr th:each="studentList:${studentinfo2}">
                                <th>手机号码:</th>
                                <td ><input type="number" name="stuPhone" th:value="${studentList.getStuPhone()}"></td>
                                <th> 家庭住址:</th>
                                <td colspan="2" >
                                    <input type="text" name="stuAddress" th:value="${studentList.getStuAddress()}" class="addressInput">
                                </td>

                            </tr >
                            <tr th:each="studentList:${studentinfo2}">
                                <th>特长:</th>
                                <td colspan="3">
                                    <input type="text" name="stuAdvantage" th:value="${studentList.getStuAdvantage()}" class="addressInput">
                                </td>
                                <th>既往病史:</th>
                                <td colspan="3"><input type="text" name="stuPastIll" th:value="${studentList.getStuPastIll()}" class="addressInput"> </td>
                             </tr>
                        </table>
                    </fieldset>
                </form>

            <fieldset>
                <legend><h2>二、学籍信息</h2></legend>
                <table class="table1">
                    <tr th:each="studentList:${studentinfo2}">
                        <td rowspan="6" style="width: 280px;"> </td>
                        <th>年级:</th>
                        <td th:text="${studentList.getStuGrade()}"></td>
                        <th>二级学院:</th>
                        <td th:text="${studentList.getStuCollege()}"> </td>
                        <th>专业:</th>
                        <td th:text="${studentList.getStuMajor()}"></td>
                        <th>班级:</th>
                        <td th:text="${studentList.getStuClass()}"></td>
                    </tr>
                    <tr th:each="studentList:${studentinfo2}">
                        <th>学制:</th>
                        <td th:text="${studentList.getStuLength()}"> </td>
                        <th>生源地:</th>
                        <td th:text="${studentList.getStuSource()}"></td>
                        <th>考生号:</th>
                        <td th:text="${studentList.getStuExamNum()}"></td>
                        <th>入学时间:</th>
                        <td th:text="${studentList.getStuEnterTime()}"></td>
                    </tr>
                    <tr th:each="studentList:${studentinfo2}">
                        <th>学生类别:</th>
                        <td th:text="${studentList.getStuType()}"></td>
                        <th>入学方式:</th>
                        <td th:text="${studentList.getStuEnterType()}"> </td>
                        <th>培养层次:</th>
                        <td th:text="${studentList.getStuLevel()}"></td>
                        <th>学籍状态:</th>
                        <td th:text="${studentList.getStuStates()}"></td>
                    </tr>
                </table>
            </fieldset>
            <fieldset>
                <legend><h2>三、家庭信息</h2></legend>

                    <table class="table2">
                        <thead>
                        <tr class="tr1">
                            <th>关系</th>
                            <th>家长姓名</th>
                            <th>家长联系方式</th>
                            <th>工作单位</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>

                        <tr class="tr2" th:each="stuFamily:${familyinfo2}" >
                            <form th:action="@{/stu_family_update}" th:object="${stuFamily}" method="post"  onsubmit="return updateFamily();"
                                  name="familyForm1" autocomplete="off">
                            <input type="hidden" name="familyNum" th:value="${stuFamily.getFamilyNum()}" >
                            <td ><input name="familyRelation" type="text" th:value="${stuFamily.getFamilyRelation()}"  class="faminput"></td>
                            <td ><input name="familyName" type="text" th:value="${stuFamily.getFamilyName()}" class="faminput"> </td>
                            <td ><input name="familyPhone" type="number" th:value="${stuFamily.getFamilyPhone()}" class="faminput"></td>
                            <td ><input name="familyWorkAddress" type="text" th:value="${stuFamily.getFamilyWorkAddress()}" class="faminput"> </td>
                            <td>
                                <input type="submit" value="编辑" id="updateFamily"
                                            style="width:45px;height:30px;border-radius: 5px;color:white;background-color:#4169E1;margin-left:5px;">
                                <a th:href="@{'/stu_family_delete/'+${stuFamily.getFamilyNum()}}" ><input type="button" value="删除" th:onclick="return del()"
                                      style="width:45px;height:30px;border-radius: 5px;color:white;background-color:red;margin-left:5px;"></a>
                            </td>
                            </form>
                        </tr>
                        <form action="/stu_family_add" method="post" onsubmit="return addFamily();" name="familyForm2" autocomplete="off">
                        <tr class="tr2">
                            <td><input type="text" name="familyRelation2" class="faminput"></td>
                            <td><input type="text" name="familyName2" class="faminput"></td>
                            <td><input type="number" name="familyPhone2" class="faminput"></td>
                            <td><input type="text" name="familyWorkAddress2" class="faminput"> </td>
                            <td><input type="submit" value="添加" name="submit"   style="width:65px;height:30px;border-radius:
                            5px;color:white;background-color:greenyellow;margin-left:5px;"  ></td>
                        </tr>
                        </form>
                        </tbody>
                    </table>
                </form>
            </fieldset>
        </div>
    </div>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function() {
        var element = layui.element;
    });
</script>
<script src="js/jquery-3.3.1.min.js"></script>
<script th:inline="javascript" >
    function validateForm(){
        var qq=document.forms["myForm"]["stuQq"].value;
        var wechat=document.forms["myForm"]["stuWechat"].value;
        var advantage=document.forms["myForm"]["stuAdvantage"].value;
        var address=document.forms["myForm"]["stuAddress"].value;
        var pastIll=document.forms["myForm"]["stuPastIll"].value;
        var x=document.forms["myForm"]["stuPhone"].value;
        var y=document.forms["myForm"]["stuPostalCode"].value;
        var bankId=document.forms["myForm"]["stuBankId"].value;
        if (x.length!==11){
            alert("手机号的长度为11位");
            return false;
        }
        if (y.length!==6){
            alert("邮编的长度为6位");
            return false;
        }
        if (bankId.length!==18){
            alert("银行卡号的长度为18位");
            return false;
        }
        if(qq.length==0||wechat.length==0||advantage.length==0||address.length==0||pastIll.length==0){
            alert("输入不能为空");
            return false;
        }else{
            alert("修改成功");
            return true;
        }
    }
    function updateFamily(){
        var familyRelation=document.forms["familyForm1"]["familyRelation"].value;
        var familyName=document.forms["familyForm1"]["familyName"].value;
        var familyPhone=document.forms["familyForm1"]["familyPhone"].value;
        var familyWorkAddress=document.forms["familyForm1"]["familyWorkAddress"].value;

        if(familyRelation.length==0||familyName.length==0||familyWorkAddress.length==0||familyPhone.length!==11){
            alert("输入不能为空");
            return false;
        }else{
            alert("添加成功");
            return true;
        }
    }
    function del(){
        if(!confirm("确认要删除？")){
            window.event.returnValue = false;
        }
    }
    function addFamily(){
        var familyRelation2=document.forms["familyForm2"]["familyRelation2"].value;
        var familyName2=document.forms["familyForm2"]["familyName2"].value;
        var familyPhone2=document.forms["familyForm2"]["familyPhone2"].value;
        var familyWorkAddress2=document.forms["familyForm2"]["familyWorkAddress2"].value;
      if(familyRelation2.length==0||familyName2.length==0||familyPhone2.length!==11||familyWorkAddress2.length==0){
            alert("输入不能为空");
            return false;
        }else if([[${msg}]]!="" && [[${msg}]]!="success"){
          alert("该数据已存在");
          return false;
      }else{
            alert("添加成功");
            return true;
        }
    }

</script>
</body>
</html>